<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时签到系统</title>
    <!-- UIkit CSS -->
    <link rel="stylesheet" href="../node_modules/uikit/dist/css/uikit.min.css" />
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Socket.io -->
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
    <!-- UIkit JS -->
    <script src="../node_modules/uikit/dist/js/uikit.min.js"></script>
    <script src="../node_modules/uikit/dist/js/uikit-icons.min.js"></script>
    <!-- 添加Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="uk-padding uk-padding-large@m" style="max-width: none; width: 95%; margin: 0 auto;">
        <!-- 头部导航 -->
        <nav class="uk-navbar-container uk-navbar-transparent uk-margin" uk-navbar style="background:linear-gradient(135deg,#232526,#414345); border-radius: 8px;">
            <div class="uk-navbar-left">
                <a class="uk-navbar-item uk-logo" href="#" style="color: white;">
                    <img src="img/logo.png" alt="软帝集团" style="height: 60px; margin-right: 12px;margin-left: 12px;">
                    <div style="display: inline-block; vertical-align: middle;">
                        <div style="font-size: 18px; font-weight: bold; line-height: 1.2;">软帝集团</div>
                        <div style="font-size: 14px; opacity: 0.9; line-height: 1.2;">实时签到系统</div>
                    </div>
                </a>
            </div>
        </nav>

        <!-- 状态栏 -->
        <div class="uk-grid-medium uk-child-width-1-3@l uk-child-width-1-2@m uk-child-width-1-1@s uk-margin status-cards-grid" uk-grid>
            <div>
                <div class="uk-card uk-card-default uk-card-body uk-text-center">
                    <span uk-icon="icon: users; ratio: 1.2" class="uk-text-primary"></span>
                    <div class="uk-margin-small-top">
                        <div class="uk-text-small uk-text-muted">在线人数</div>
                        <div class="uk-text-large uk-text-bold" id="activeUsers">0</div>
                    </div>
                </div>
            </div>
            <div>
                <div class="uk-card uk-card-default uk-card-body uk-text-center">
                    <span uk-icon="icon: check; ratio: 1.2" class="uk-text-success"></span>
                    <div class="uk-margin-small-top">
                        <div class="uk-text-small uk-text-muted">已签到人数</div>
                        <div class="uk-text-large uk-text-bold" id="totalSignIns">0</div>
                    </div>
                </div>
            </div>
            <div>
                <div class="uk-card uk-card-default uk-card-body uk-text-center time-card">
                    <span uk-icon="icon: clock; ratio: 1.2" class="uk-text-warning"></span>
                    <div class="uk-margin-small-top">
                        <div class="uk-text-small uk-text-muted">当前时间</div>
                        <div class="uk-text-large uk-text-bold">
                            <span id="currentDate">----年--月--日</span>
                            <span id="currentTime">--:--:--</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 主要内容区域 -->
        <div class="uk-grid-medium uk-child-width-1-3@xl uk-child-width-2-5@l uk-child-width-1-2@m uk-child-width-1-1@s" uk-grid>
            <!-- 签到表单 -->
            <div>
                <div class="uk-card uk-card-default">
                    <div class="uk-card-header">
                        <h3 class="uk-card-title">
                            <span uk-icon="icon: sign-in" class="uk-margin-small-right"></span>
                            我要签到
                        </h3>
                    </div>
                    <div class="uk-card-body">
                        <form class="uk-form-stacked">
                            <div class="uk-margin">
                                <input class="uk-input" type="text" id="userName" placeholder="请输入您的姓名" required>
                            </div>
                            <div class="uk-margin">
                                <button id="signInBtn" class="uk-button uk-button-primary uk-width-1-1" type="button">
                                    <span uk-icon="icon: check" class="uk-margin-small-right"></span>
                                    立即签到
                                </button>
                            </div>
                        </form>
                        <div id="signInMessage" class="uk-margin-top"></div>
                    </div>
                </div>
            </div>
            
            <!-- 签到列表 -->
            <div class="uk-width-2-3@xl uk-width-3-5@l uk-width-1-2@m uk-width-1-1@s">
                <div class="uk-card uk-card-default">
                    <div class="uk-card-header">
                        <div class="uk-grid-small uk-flex-middle" uk-grid>
                            <div class="uk-width-expand">
                                <h3 class="uk-card-title">
                                    <span uk-icon="icon: list" class="uk-margin-small-right"></span>
                                    签到列表
                                </h3>
                            </div>
                            <div class="uk-width-auto">
                                <div class="uk-button-group uk-margin-small-right">
                                    <button id="listViewBtn" class="uk-button uk-button-default uk-button-small uk-active" title="列表视图">
                                        <span uk-icon="icon: list"></span>
                                    </button>
                                    <button id="gridViewBtn" class="uk-button uk-button-default uk-button-small" title="网格视图">
                                        <span uk-icon="icon: grid"></span>
                                    </button>
                                </div>
                                <button id="exportExcelBtn" class="uk-button uk-button-primary uk-button-small uk-margin-small-right" disabled>
                                    <span uk-icon="icon: download" class="uk-margin-small-right"></span>
                                    导出Excel
                                </button>
                                <button id="clearAllBtn" class="uk-button uk-button-danger uk-button-small" disabled>
                                    <span uk-icon="icon: trash" class="uk-margin-small-right"></span>
                                    清空全部
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="uk-card-body uk-padding-remove-top">
                        <div id="signInList" class="signin-list-container">
                            <!-- 签到记录将动态添加到这里 -->
                            <div class="empty-message uk-text-center uk-text-muted uk-margin-large-top">
                                <span uk-icon="icon: list; ratio: 2" class="uk-display-block uk-margin-small-bottom"></span>
                                <p>暂无签到记录</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 页脚 -->
        <footer class="uk-section uk-section-small uk-text-center uk-margin-large-top">
            <div class="uk-container">
                <p class="uk-text-small uk-text-muted">&copy; 2025 实时签到系统 - 基于WebSocket技术</p>
                <p class="uk-text-small uk-text-muted">班级签到系统</p>
            </div>
        </footer>
    </div>
    
    <!-- 确认删除对话框 -->
    <div id="confirmDialog" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
            <button class="uk-modal-close-default" type="button" uk-close></button>
            <h2 class="uk-modal-title">
                <span uk-icon="icon: warning" class="uk-text-warning uk-margin-small-right"></span>
                确认删除
            </h2>
            <p>确定要删除这条签到记录吗？</p>
            <p class="uk-text-right">
                <button id="cancelDelete" class="uk-button uk-button-default uk-modal-close" type="button">取消</button>
                <button id="confirmDelete" class="uk-button uk-button-danger" type="button">确认删除</button>
            </p>
        </div>
    </div>
    
    <script src="js/main.js"></script>
</body>
</html>